<template>
  <div class="profile">
    <!-- 英雄区域 -->
    <section class="hero">
      <a-row justify="center">
        <a-col :xs="24" :lg="20">
          <h1>个人中心</h1>
          <p>管理您的个人资料、任务进度和成就</p>
        </a-col>
      </a-row>
    </section>

    <!-- 个人头部信息 -->
    <a-card class="profile-header" :bordered="true">
      <a-row :gutter="40" align="middle">
        <a-col :xs="24" :md="6">
          <div class="profile-avatar">
            <i class="fas fa-user"></i>
            <div class="profile-level">Lv.15</div>
          </div>
        </a-col>
        <a-col :xs="24" :md="18">
          <div class="profile-info">
            <h1 class="profile-name">张明同学</h1>
            <div class="profile-title">精英冒险者 | 星辰学术公会成员</div>
            <p class="profile-desc">
              计算机科学与技术专业大三学生，热爱编程和技术创新。已完成42个任务，获得28项成就，目前是校园冒险者排行榜前十名。
            </p>

            <a-row :gutter="20" class="profile-stats">
              <a-col :xs="8" v-for="stat in profileStats" :key="stat.label">
                <div class="profile-stat">
                  <div class="profile-stat-value">{{ stat.value }}</div>
                  <div class="profile-stat-label">{{ stat.label }}</div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-col>
      </a-row>
    </a-card>

    <!-- 个人内容区域 -->
    <a-row :gutter="30" class="profile-content">
      <a-col :xs="24" :lg="12">
        <a-card class="profile-card" :bordered="true">
          <template #title>
            <h3 class="profile-card-title">任务统计</h3>
          </template>
          <div class="chart-container">
            <canvas id="taskChart"></canvas>
          </div>
        </a-card>
      </a-col>

      <a-col :xs="24" :lg="12">
        <a-card class="profile-card" :bordered="true">
          <template #title>
            <h3 class="profile-card-title">技能分布</h3>
          </template>
          <div class="chart-container">
            <canvas id="skillChart"></canvas>
          </div>
        </a-card>
      </a-col>

      <a-col :xs="24" :lg="12">
        <a-card class="profile-card" :bordered="true">
          <template #title>
            <h3 class="profile-card-title">近期任务</h3>
          </template>
          <div class="recent-tasks">
            <div class="task-item" v-for="task in recentTasks" :key="task.id">
              <div class="task-info">
                <div class="task-name">{{ task.name }}</div>
                <div class="task-meta">{{ task.type }} | {{ task.status }}</div>
              </div>
              <div class="task-reward">+{{ task.reward }}积分</div>
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :xs="24" :lg="12">
        <a-card class="profile-card" :bordered="true">
          <template #title>
            <h3 class="profile-card-title">我的成就</h3>
          </template>
          <a-row :gutter="15" class="achievements-grid">
            <a-col :xs="12" :sm="6" v-for="achievement in achievements" :key="achievement.id">
              <div class="achievement-item">
                <div class="achievement-icon" :style="{ background: achievement.color }">
                  <i :class="achievement.icon"></i>
                </div>
                <div class="achievement-name">{{ achievement.name }}</div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import Chart from 'chart.js/auto'

export default defineComponent({
  name: 'Profile',
  setup() {
    const profileStats = ref([
      { value: '3,850', label: '冒险积分' },
      { value: '42', label: '完成任务' },
      { value: '28', label: '获得成就' }
    ])

    const recentTasks = ref([
      {
        id: 1,
        name: '校园APP开发',
        type: '技术挑战',
        status: '进行中',
        reward: 350
      },
      {
        id: 2,
        name: '学术论文翻译',
        type: '学术任务',
        status: '已完成',
        reward: 280
      },
      {
        id: 3,
        name: '迎新活动策划',
        type: '团队任务',
        status: '已完成',
        reward: 420
      }
    ])

    const achievements = ref([
      {
        id: 1,
        name: '冒险先锋',
        icon: 'fas fa-medal',
        color: 'linear-gradient(45deg, #d4af37, #b8972e)'
      },
      {
        id: 2,
        name: '技术专家',
        icon: 'fas fa-code',
        color: 'linear-gradient(45deg, #3498db, #2c3e50)'
      },
      {
        id: 3,
        name: '团队领袖',
        icon: 'fas fa-users',
        color: 'linear-gradient(45deg, #27ae60, #1e5631)'
      },
      {
        id: 4,
        name: '学术精英',
        icon: 'fas fa-graduation-cap',
        color: 'linear-gradient(45deg, #9b59b6, #8e44ad)'
      }
    ])

    onMounted(() => {
      // 初始化任务统计图表
      const taskCtx = document.getElementById('taskChart').getContext('2d')
      new Chart(taskCtx, {
        type: 'bar',
        data: {
          labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
          datasets: [{
            label: '完成任务数',
            data: [5, 7, 8, 6, 9, 7],
            backgroundColor: 'rgba(212, 175, 55, 0.7)',
            borderColor: 'rgba(212, 175, 55, 1)',
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              ticks: {
                color: '#a1a8b8'
              }
            },
            x: {
              grid: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              ticks: {
                color: '#a1a8b8'
              }
            }
          },
          plugins: {
            legend: {
              labels: {
                color: '#f0f4f8'
              }
            }
          }
        }
      })

      // 初始化技能分布图表
      const skillCtx = document.getElementById('skillChart').getContext('2d')
      new Chart(skillCtx, {
        type: 'radar',
        data: {
          labels: ['技术开发', '学术研究', '团队协作', '活动组织', '沟通能力', '问题解决'],
          datasets: [{
            label: '技能评分',
            data: [85, 70, 90, 75, 80, 85],
            fill: true,
            backgroundColor: 'rgba(212, 175, 55, 0.2)',
            borderColor: 'rgba(212, 175, 55, 1)',
            pointBackgroundColor: 'rgba(212, 175, 55, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(212, 175, 55, 1)'
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            r: {
              angleLines: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              grid: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              pointLabels: {
                color: '#f0f4f8'
              },
              ticks: {
                color: '#a1a8b8',
                backdropColor: 'transparent'
              }
            }
          },
          plugins: {
            legend: {
              labels: {
                color: '#f0f4f8'
              }
            }
          }
        }
      })
    })

    return {
      profileStats,
      recentTasks,
      achievements
    }
  }
})
</script>

<style scoped>
.profile {
  padding-bottom: 50px;
}

.hero {
  padding: 80px 0 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1.1;
  margin-bottom: 25px;
  background: linear-gradient(to right, #ffffff, #d4d4d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  font-size: 1.3rem;
  max-width: 700px;
  margin-bottom: 40px;
  color: #a1a8b8;
  line-height: 1.6;
}

.profile-header {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  margin-bottom: 40px;
}

.profile-header :deep(.ant-card-body) {
  padding: 0;
}

.profile-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(45deg, #2c3e50, #4a6491);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.profile-avatar i {
  font-size: 60px;
  color: rgba(255, 255, 255, 0.1);
}

.profile-level {
  position: absolute;
  bottom: -10px;
  right: -10px;
  background: linear-gradient(135deg, #d4af37 0%, #b8972e 100%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a2a4d;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.profile-info {
  text-align: left;
}

.profile-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 2.5rem;
  color: white;
  margin-bottom: 10px;
}

.profile-title {
  color: #d4af37;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.profile-desc {
  color: #a1a8b8;
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 30px;
}

.profile-stats {
  margin-top: 30px;
}

.profile-stat {
  display: flex;
  flex-direction: column;
  padding: 15px 25px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  text-align: center;
}

.profile-stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #d4af37;
  margin-bottom: 5px;
}

.profile-stat-label {
  font-size: 14px;
  color: #a1a8b8;
}

.profile-content {
  margin-top: 30px;
}

.profile-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  margin-bottom: 30px;
  height: 100%;
}

.profile-card :deep(.ant-card-body) {
  padding: 0;
}

.profile-card-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.5rem;
  color: white;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-container {
  height: 300px;
  position: relative;
}

.recent-tasks {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}

.task-info {
  flex: 1;
}

.task-name {
  font-weight: 600;
  color: white;
  margin-bottom: 5px;
}

.task-meta {
  color: #a1a8b8;
  font-size: 14px;
}

.task-reward {
  color: #d4af37;
  font-weight: 600;
}

.achievements-grid {
  margin-top: 10px;
}

.achievement-item {
  text-align: center;
  margin-bottom: 20px;
}

.achievement-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.achievement-icon i {
  font-size: 30px;
  color: white;
}

.achievement-name {
  font-size: 14px;
  color: white;
}

@media (max-width: 768px) {
  .profile-info {
    text-align: center;
  }

  .profile-stats {
    justify-content: center;
  }

  .profile-stat {
    margin-bottom: 15px;
  }
}
</style>